<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/cart.js"></script>
</head>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<body>
<script type="text/javascript">
var u=JSON.parse(localStorage.getItem("user"));
	$(function(){
		var user=localStorage.getItem("user");
		if(u==null){
			alert("请先登录")
		window.location.href="http://localhost:8080/watch/login.html"
		}
			$.post("getShopcart",{
				uid:u.id
			},function(res){
				console.log(res)
				for (var i = 0; i < res.length; i++) {
					$("#products").append(`
							<tr>
			                <td class="checkbox"><input onclick="jiSuan()" name="checkCart" thisCart='${JSON.stringify(res[i])}' id="${res[i].product.discountPrice}" value="${res[i].product.number}" class="check-one check" type="checkbox"/></td>
			                <td class="cart-goods"><img src="images/${res[i].product.img}" alt=""/><span><a href="products_show.html?id=${res[i].product.id}" class="cart-goods-link">${res[i].product.name}</a></span></td>
			                <td class="price">${res[i].product.discountPrice}</td>
			                <td class="count"><span onclick="jianShao(this,${res[i].id})" class="reduce">-</span><input id="number" name="number" class="count-input" type="text" value="${res[i].product.number}"/><span onclick="add(this,${res[i].id})" class="reduce">+</span></td>
			                <td class="subtotal">${res[i].count}</td>
			                <td class="operation"><a href="" onclick="cart_del(this,${res[i].id})">删除</a></td>
			            </tr>
					`)
				}
			},"json");
		})
	
	//删除
	function cart_del(obj,id){
		$.post("delShopcart",{
			id:id
		},function(res){
			alert("1")
		},"json")
	}
	function del(obj){
     	var val = $(obj).prop("checked");
     	$("#products input:checkbox").prop("checked",val);
    }
	//添加某个商品的数量
	function add(obj,id){
		$.post("updShopcart",{
			id:id
		},function(res){
			window.location.reload()
		},"json")
	}
	//减少某个商品数量
	function jianShao(obj,id){
		$.post("upShopcart",{
			id:id
		},function(res){
			window.location.reload()
		},"json")
	}
	//清空购物车
	function shanChuProduct(){
		$.post("deleShopcart",{
			uid:u.id
		},function(res){
			window.location.reload()
		},"json")
	}
	//计算
	function jiSuan(){
		var shopping=document.getElementsByName("checkCart");
		 var sum=null;
		 for(var i=0;i<shopping.length;i++){
			 if(shopping[i].checked==true){
				 var tr = shopping[i].parentNode.parentNode;
				 var num=$(tr).children('td').children("input").val()
				 console.log(num)
				 var price=$(tr).children(".price").html()
				 console.log(price)
				  sum+=num*price;
			 }
		 }
		 
		 $("#priceTotal").html(sum);
	}
 	$(function() {  
        $('#checkCartAll').on('click',function(){
            if(this.checked) {
            	console.log($("input[name='checkCart']"))
                $("input[name='checkCart']").attr('checked',true);
            }else {
                $("input[name='checkCart']").attr('checked',false);
            }
        });
    });  
	function subAll(){
		var shopping=$("[name='checkCart']");
		 var sum=null;
		 for(var i=0;i<shopping.length;i++){
			 if(shopping[i].checked==false){
				 var tr = shopping[i].parentNode.parentNode;
				 var num=$(tr).children('td').children("input").val()
				 console.log(num)
				 var price=$(tr).children(".price").html()
				 console.log(price)
				  sum+=num*price;
			 }
		 }
		 
		 $("#priceTotal").html(sum);
	}
	function jieSuan(obj){
		
		var checkCart = $("input[name='checkCart']");
		var checkCartLength = $("input[name='checkCart']").length;
		var checkCartL = 0;
		for(var i=0;i<checkCartLength;i++){
			if($(checkCart[i]).is(":checked")){
				sessionStorage.setItem("checkCart"+checkCartL,$(checkCart[i]).attr("thisCart"))
				checkCartL++;
			}
		}
		sessionStorage.setItem("checkCartL",checkCartL)
		sessionStorage.setItem("priceTotal",$("#priceTotal").html());
		window.location.href="cart2.html";
	}
</script>
<!--header-->
<div class="header2">
    <div class="header-box">
        <div class="header">
            <div class="header-left-title">
                <div class="welcome"><img  class="icon" src="images/icon/welcome.png" alt="">&nbsp;欢迎来到<a href="">AnJunDCM官网</a>!</div>
                <div class="login">&nbsp;&nbsp;&nbsp;<a href="login.html">登陆</a>&nbsp;丨&nbsp;<a href="reg.html">免费注册</a></div>
            </div>
            <div class="header-center-title">
                <ul>
                    <li><a href="home/user.html">我的AnJun</a></li>
                    <li><a href="cart.html">购物车</a></li>
                    <li><a href="orderform.html">我的订单</a></li>
                    <li><a href="">收藏网站</a></li>
                    <li><a href="">积分</a></li>
                </ul>
            </div>
            <div class="header_right_title">
                <ul>
                    <li><a href="">我要供货</a></li>
                    <li><a href="">客服中心<i class="kefu-icon"><img src="images/kefu.png" alt="" width="20" height="20"></i></a></li>

                </ul>

            </div>


        </div>
        <div class="header-nav-box">
            <div class="nav">
                <div class="nav-logo">
                    <a href="" class="logo"><img src="images/logo.png" alt=""></a>
                </div>
                <div class="nav-search-box">
                    <form action="" name="fomr1">
                        <div class="nav-search">
                            <div class="bar1">
                                <input type="text" placeholder="请输入您要搜索的内容..." class="text"><button type="submit" class="btn">搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="nav-daohang">
                <div class="daohang">
                    <ul>
                        <li><a href="goods.html">全部分类</a></li>
                        <li><a href="index.html">首页</a></li>
                        <li><a href=""> 选品采购</a></li>
                        <li><a href="daigou.html">指定代购</a></li>
                        <li><a href="need.html"> 需求提交</a></li>
                        <li><a href="wl-case.html">物流方案</a></li>
                        <li><a href="join.html">我要入驻</a></li>
                        <li><a href="us.html">关于我们</a></li>

                    </ul></div>
            </div>

        </div>
    </div></div>
<!--hearder end!-->


<!--cart-->

<div class="cart-box">

    <!--步骤图-->
    <div class="cart-buzhou">
        <img src="images/cart-move.jpg" alt="">

    </div>
<!--步骤图end-->

    <!--购物车-->
    <div class="catbox">
        <table id="cartTable">
            <thead>
            <tr>
                <th ><label><input class="check-all check" id="deleteAll" checked="false" type="checkbox"/>&nbsp;全选</label></th>
                <th >商品</th>
                <th>单价</th>
                <th >数量</th>
                <th >小计</th>
                <th >操作</th>
            </tr>
            </thead>
            <tbody id="products">
            
            </tbody>
        </table>

        <div class="foot" id="foot">
            <label class="fl select-all"><input type="checkbox" id="checkCartAll" onclick="subAll()" name="name" />&nbsp;全选</label>
            <a class="fl delete"   onclick="shanChuProduct()" href="javascript:;">删除</a>
            <div class="fr closing"><a onclick="jieSuan(this)">结 算</a></div>
            <div class="fr total">合计：￥<span id="priceTotal"></span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1-1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>

    </div>
    <!--购物车end!-->



</div>

<!--cart end!-->

<!--footer-->
<div class="footer-box" >
    <div class="footer-list-box">
        <div class="footer-list">
            <ul><img src="images/icon/about.png" alt="" width="20" height="20">&nbsp;关于我们
                <li class="magin"><a href="">关于安骏</a></li>
                <li><a href="">产品服务</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">企业文化</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/zhinan.png" alt="" width="20" height="20">&nbsp;新手指南
                <li class="magin"><a href="">新手福利</a></li>
                <li><a href="">推荐有奖</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">我的积分</a></li>
                <li><a href="">客服中心</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/zhifu.png" alt="" width="20" height="20">&nbsp;支付方式
                <li class="magin"><a href="">支付宝</a></li>
                <li><a href="">WeChat</a></li>
                <li><a href="">前海支付</a></li>
                <li><a href="">银联支付</a></li>
                <li><a href="">其它支付</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/daohang.png" alt="" width="20" height="20">&nbsp;网站导航
                <li class="magin"><a href="">选品采购</a></li>
                <li><a href="">指定代购</a></li>
                <li><a href="">需求提交</a></li>
                <li><a href="">我要入驻</a></li>
                <li><a href="">系统登录</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/kefu.png" alt="" width="20" height="20">&nbsp;客服电话：
                <li class="magin" id="phone"><a href="">0755-12345678</a></li>
                <li><a href="">地址：深圳市龙岗区坂田街道格泰隆工业园</a></li>
                <li><a href="">邮箱：123456789@qq.com</a></li>

            </ul>
        </div>

        <div class="footer-list" style="margin-left: 100px;">
            <ul><img src="images/app.jpg" alt="" width="150" height="150">
                <li class="magin" id="guanzhu"><a href="">关注安骏</a></li>

            </ul>
        </div>


    </div>
    <div class="footer-footer">
        © 2020-2020 AnJun DCM  All Rights Reserved 9.0 备案号：123456789

    </div>

</div>
<!--footer end!-->


</body>
</html>